<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="style.css">
    <script>
        function validateForm() {
            const password = document.getElementById("password").value;
            const confirmPassword = document.getElementById("confirmPassword").value;
            const messageDiv = document.getElementById("message");

            if (password !== confirmPassword) {
                messageDiv.innerHTML = "两次输入密码不一致";
                messageDiv.style.display = "block"; // 确保消息显示
                return false; // 阻止表单提交
            }
            return true; // 允许表单提交
        }
    </script>
</head>
<body>
<div class="login-container">
    <div class="login-box">
        <h2>注册</h2>
        <form action="register" method="post" class="login-form" onsubmit="return validateForm()">
            <div class="input-group">
                <label for="username">账号</label>
                <input type="text" id="username" name="username" placeholder="请输入账号" required>
            </div>
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="input-group">
                <label for="confirmPassword">请确认密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
            </div>
            <button type="submit" class="login-button">注册</button>
        </form>
        <div class="options">
            <p>已经有账号了？<a href="index.jsp">登录</a></p>
        </div>
        <div id="message" >
            <%-- 使用 JavaBean 显示注册结果 --%>
            <jsp:useBean id="registerBean" class="com.example.bean.RegisterBean" scope="request" />

            <% if (registerBean != null && registerBean.getMessage() != null && !registerBean.getMessage().isEmpty()) {%>
            <p><%= registerBean.getMessage() %></p>
            <%}%>

        </div>
    </div>
</div>
</body>
</html>